<template>
  <div>
    <div>
      <div
        style="
            display: flex;
            justify-content: center;
            font-size: 24px;
            font-weight: bold;
            line-height: 42px;
           margin-bottom: 8px;
          "
      >
        <img src="@/icons/img/changzhi.png" style="width: 40px; height: 40px"/>
        {{ this.$store.state.City }}医院 连续性肾脏替代治疗（CRRT）护理记录单
      </div>
      <div class="warp">
        <div class="head-info">
          <div>
            <span class="label">姓名：</span>
            <span class="content">{{ this.data.name }}</span>
          </div>
          <div>
            <span class="label">性别：</span>
            <span class="content">{{ this.data.sex }}</span>
          </div>
          <div>
            <span class="label">年龄：</span>
            <span class="content">{{ this.$store.state.user.severFall.ageOrMonthAge }}</span>
          </div>
          <div>
            <span class="label">床号：</span>
            <span class="content">{{ this.data.bed_code }}</span>
          </div>
          <div>
            <span class="label">住院号：</span>
            <span class="content">{{ this.data.visit_id }}</span>
          </div>
          <div>
            <span class="label">治疗日期：</span>
            <el-date-picker
              v-model="info.cureDate"
              type="datetime"
              format="yyyy-MM-dd HH:mm"
              value-format="yyyy-MM-dd HH:mm:ss"
            />
          </div>
          <div>
            <span class="label">诊断：</span>
            <span class="content">{{ this.data.heimeisu }}</span>
          </div>
        </div>
        <div>
          <div style="font-size: 15px;font-weight: bold;margin-top: 10px">CRRT前评估:</div>
          <div class="crrt-info">
            <div class="item">
              <span class="label">机器型号：</span>
              <input
                v-model="info.machineModel"
                autocomplete="off"
                spellcheck="false"
                type="text"
                placeholder=""
                class="crrt-input"
                style="left: 15px; width: 120px; padding-top: 14px"
              />
            </div>
            <div class="item">
              <span class="label">置管部位：</span>
              <input
                v-model="info.catheteringPart"
                autocomplete="off"
                spellcheck="false"
                type="text"
                placeholder=""
                class="crrt-input"
                style="left: 15px; width: 120px; padding-top: 14px"
              />
            </div>
            <div class="item">
              <span class="label">血液滤过器：</span>
              <input
                v-model="info.hemofilter"
                autocomplete="off"
                spellcheck="false"
                type="text"
                placeholder=""
                class="crrt-input"
                style="left: 15px; width: 120px; padding-top: 14px"
              />
            </div>
            <div class="item">
              <span class="label">神志：</span>
              <input
                v-model="info.mind"
                autocomplete="off"
                spellcheck="false"
                type="text"
                placeholder=""
                class="crrt-input"
                style="left: 15px; width: 120px; padding-top: 14px"
              />
            </div>
            <div class="item">
              <span class="label">收缩压：</span>
              <input
                v-model="info.systolicPressure"
                autocomplete="off"
                spellcheck="false"
                type="text"
                placeholder=""
                class="crrt-input"
                style="left: 15px; width: 120px; padding-top: 14px"
              />mmHg
            </div>
            <div class="item">
              <span class="label">舒张压：</span>
              <input
                v-model="info.diastolicPressure"
                autocomplete="off"
                spellcheck="false"
                type="text"
                placeholder=""
                class="crrt-input"
                style="left: 15px; width: 120px; padding-top: 14px"
              />mmHg
            </div>
            <div class="item">
              <span class="label">心率：</span>
              <input
                v-model="info.heartRate"
                autocomplete="off"
                spellcheck="false"
                type="text"
                placeholder=""
                class="crrt-input"
                style="left: 15px; width: 120px; padding-top: 14px"
              />次/分
            </div>
            <div class="item">
              <span class="label">呼吸：</span>
              <input
                v-model="info.breathe"
                autocomplete="off"
                spellcheck="false"
                type="text"
                placeholder=""
                class="crrt-input"
                style="left: 15px; width: 120px; padding-top: 14px"
              />次/分
            </div>
            <div class="item">
              <span class="label">SpO2：</span>
              <input
                v-model="info.spo2"
                autocomplete="off"
                spellcheck="false"
                type="text"
                placeholder=""
                class="crrt-input"
                style="left: 15px; width: 120px; padding-top: 14px"
              />
            </div>
            <div class="item">
              <span class="label">透析液速度：</span>
              <input
                v-model="info.dialyzateVelocity"
                autocomplete="off"
                spellcheck="false"
                type="text"
                placeholder=""
                class="crrt-input"
                style="left: 15px; width: 120px; padding-top: 14px"
              />L/H
            </div>
            <div class="item">
              <span class="label">前置换速度：</span>
              <input
                v-model="info.beforeReplacementVelocity"
                autocomplete="off"
                spellcheck="false"
                type="text"
                placeholder=""
                class="crrt-input"
                style="left: 15px; width: 120px; padding-top: 14px"
              />L/H
            </div>
            <div class="item">
              <span class="label">后置换速度：</span>
              <input
                v-model="info.afterReplacementVelocity"
                autocomplete="off"
                spellcheck="false"
                type="text"
                placeholder=""
                class="crrt-input"
                style="left: 15px; width: 120px; padding-top: 14px"
              />L/H
            </div>
            <div class="item">
              <span class="label">置换液补充后：</span>
              <input
                v-model="info.liquidReplenish"
                autocomplete="off"
                spellcheck="false"
                type="text"
                placeholder=""
                class="crrt-input"
                style="left: 15px; width: 120px; padding-top: 14px"
              />%
            </div>
          </div>
        </div>
        <div class="summary-block">
          <div style="font-size: 15px;font-weight: bold;margin-top: 10px">小结：</div>
          <div style="display: flex;font-size: 14px;">
            <div>
              <span>开机时间：</span>
              <el-date-picker
                v-model="info.startTime"
                type="datetime"
                width="150"
                format="yyyy-MM-dd HH:mm"
                value-format="yyyy-MM-dd HH:mm:ss"
              />
            </div>
            <div style="margin-right: 40px">
              <span>上机护士：</span>
              <el-select
                v-model="info.upNurse"
                placeholder=""
                clearable
                filterable
                :filter-method="signFilter"
              >
                <el-option
                  v-for="item in signOptions"
                  :key="item.id"
                  :value="item.user_name"
                  :label="item.user_name"
                />
              </el-select>
            </div>
            <div>
              <span>关机时间：</span>
              <el-date-picker
                v-model="info.closeTime"
                type="datetime"
                format="yyyy-MM-dd HH:mm"
                value-format="yyyy-MM-dd HH:mm:ss"
              />
            </div>
            <div>
              <span>下机护士：</span>
              <el-select
                v-model="info.downNurse"
                placeholder=""
                clearable
                filterable
                :filter-method="signFilter"
              >
                <el-option
                  v-for="item in signOptions"
                  :key="item.id"
                  :value="item.user_name"
                  :label="item.user_name"
                />
              </el-select>
            </div>
          </div>
        </div>

        <div style="height: 45px;text-align: right">
          <el-button type="primary" @click="histion()" :disabled=garbage>历史记录</el-button>
          <el-button type="primary" @click="saveBtn" :disabled=garbage>保存</el-button>
          <el-button type="primary" @click="printAllButtonClick" :disabled=garbage>打印</el-button>
          <el-button type="primary" @click="reload" :disabled=garbage>刷新</el-button>
        </div>
      </div>

      <el-table
        ref="mainTable"
        :data="dataArray"
        :stripe="true"
        style="width: 100%"
        @row-dblclick="rowDbClick"
        :row-class-name="tableRowClassName"
        :header-cell-style="{
            background: '#F5F7FA',
            color: '#606266',
          }"
      >
        <el-table-column
          label="日期"
          prop="dateTime"
          width="150"
          align="center"
          fixed
        >
          <template slot-scope="scope">
            <el-date-picker
              v-if="editIndex == scope.$index"
              v-model="scope.row.dataTime"
              class="dataInputer"
              placeholder=""
              type="datetime"
              format="yyyy-MM-dd HH:mm"
              value-format="yyyy-MM-dd HH:mm:ss"
              @change="dateTimeChange(scope.row)"
            />
            <span v-if="editIndex != scope.$index">{{
                scope.row.dataTime
              }}</span>
          </template>
        </el-table-column>
        <el-table-column fixed label="操作" width="70" align="center">
          <template slot-scope="scope">
            <el-button
              v-if="editIndex != scope.$index && scope.row.id"
              size="medium"
              type="text"
              icon="el-icon-delete"
              @click="deleteButtonClick(scope.$index, scope)"
              style="color: red"
              :disabled="!actionColumnFlag"
            ></el-button>
            <el-button
              v-if="editIndex != scope.$index"
              size="medium"
              type="text"
              icon="el-icon-edit"
              @click="editButtonClick(scope.$index, $event, scope.row)"
              style="color: green"
              :disabled="!actionColumnFlag"
            ></el-button>
            <el-button
              v-if="editIndex == scope.$index"
              size="medium"
              type="text"
              icon="el-icon-back"
              @click="reverseButtonClick(scope.$index)"
              style="color: green"
              :disabled="!actionColumnFlag"
            ></el-button>
            <el-button
              v-if="editIndex == scope.$index"
              size="medium"
              type="text"
              icon="el-icon-check"
              @click="saveButtonClick(scope, scope.$index)"
              style="color: blue"
              :disabled="!actionColumnFlag"
            ></el-button>
          </template>
        </el-table-column>
        <el-table-column label="抗凝" align="center">
          <el-table-column label="抗凝方式" align="center">
            <template slot-scope="scope">
              <el-input
                v-if="editIndex == scope.$index"
                v-model="scope.row.antiFreezing"
                style="text-align: center"
                name="antiFreezing"
                maxlength="255"
              />
              <span v-if="editIndex != scope.$index">{{
                  scope.row.antiFreezing
                }}</span>
            </template>
          </el-table-column>
          <el-table-column label="抗凝剂量" align="center">
            <template slot-scope="scope">
              <el-input
                v-if="editIndex == scope.$index"
                v-model="scope.row.anticoagulant"
                style="text-align: center"
                name="anticoagulant"
                maxlength="255"
              />
              <span v-if="editIndex != scope.$index">{{
                  scope.row.anticoagulant
                }}</span>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="神志" align="center">
          <template slot-scope="scope">
            <el-input
              v-if="editIndex == scope.$index"
              v-model="scope.row.mind"
              style="text-align: center"
              name="mind"
              maxlength="255"
            />
            <span v-if="editIndex != scope.$index">{{ scope.row.mind }}</span>
          </template>
        </el-table-column>
        <el-table-column label="血压(mmHg)" align="center">
          <template slot-scope="scope">
            <el-input
              v-if="editIndex == scope.$index"
              v-model="scope.row.blood"
              style="text-align: center"
              name="blood"
              @blur="bloodCheck($event, scope)"
            />
            <span
              v-if="editIndex != scope.$index"
              :style="{color: vitalSignsCheck(scope.row.blood,5)}"
            >{{
                scope.row.blood
              }}</span>
          </template>
        </el-table-column>
        <el-table-column label="心率(次/分)" align="center">
          <template slot-scope="scope">
            <el-input
              v-if="editIndex == scope.$index"
              v-model="scope.row.hr"
              style="text-align: center"
              name="hr"
              @blur="xinlvCheck($event, scope)"
            />
            <span
              v-if="editIndex != scope.$index"
              :style="{color: vitalSignsCheck(scope.row.hr,2)}"
            >{{ scope.row.hr }}</span>
          </template>
        </el-table-column>
        <el-table-column label="呼吸(次/分)" align="center">
          <template slot-scope="scope">
            <el-input
              v-if="editIndex == scope.$index"
              v-model="scope.row.resp"
              style="text-align: center"
              name="resp"
              @blur="huxiCheck($event, scope)"
            />
            <span
              v-if="editIndex != scope.$index"
              :style="{color: vitalSignsCheck(scope.row.resp,4)}"
            >{{ scope.row.resp }}</span>
          </template>
        </el-table-column>
        <el-table-column label="SpO₂(%)" align="center">
          <template slot-scope="scope">
            <el-input
              v-if="editIndex == scope.$index"
              v-model="scope.row.spo2"
              style="text-align: center"
              name="spo2"
              maxlength="255"
              @blur="SPO2Check($event, scope)"
            />
            <span
              v-if="editIndex != scope.$index"
              :style="{color: vitalSignsCheck(scope.row.spo2,9)}"
            >
              {{ formatSpO2(scope.row.spo2) }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="输入压" align="center">
          <template slot-scope="scope">
            <el-input
              v-if="editIndex == scope.$index"
              v-model="scope.row.inputVoltage"
              style="text-align: center"
              name="inputVoltage"
              maxlength="255"
            />
            <span v-if="editIndex != scope.$index">{{
                scope.row.inputVoltage
              }}</span>
          </template>
        </el-table-column>
        <el-table-column label="跨膜压" align="center" width="90">
          <template slot-scope="scope">
            <el-input
              v-if="editIndex == scope.$index"
              v-model="scope.row.transmembranePressure"
              style="text-align: center"
              name="transmembranePressure"
              maxlength="255"
            />
            <span v-if="editIndex != scope.$index">{{
                scope.row.transmembranePressure
              }}</span>
          </template>
        </el-table-column>
        <el-table-column label="回输压" align="center">
          <template slot-scope="scope">
            <el-input
              v-if="editIndex == scope.$index"
              v-model="scope.row.backPressure"
              style="text-align: center"
              name="backPressure"
              maxlength="255"
            />
            <span v-if="editIndex != scope.$index">{{
                scope.row.backPressure
              }}</span>
          </template>
        </el-table-column>
        <el-table-column label="护理措施" align="center" width="150">
          <template slot-scope="scope">
            <el-input
              v-if="editIndex == scope.$index"
              v-model="scope.row.content"
              style="text-align: left"
              type="textarea"
              :autosize="{ minRows: 3, maxRows: 10 }"
              @dblclick.native.stop="selectTemplate(scope, scope.$index)"
            />
            <div v-if="editIndex != scope.$index" style="text-align: left">{{
                scope.row.content
              }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="超滤率ml/h" align="center" width="100">
          <template slot-scope="scope">
            <el-input
              v-if="editIndex == scope.$index"
              v-model="scope.row.ultrafiltrationRate"
              style="text-align: center"
              name="ultrafiltrationRate"
              oninput="value=value.replace(/[^0-9.]/g,'')"
            />
            <span v-if="editIndex != scope.$index">{{
                scope.row.ultrafiltrationRate
              }}</span>
          </template>
        </el-table-column>
        <el-table-column label="血流量ml/min" align="center" width="100">
          <template slot-scope="scope">
            <el-input
              v-if="editIndex == scope.$index"
              v-model="scope.row.bloodFlow"
              style="text-align: center"
              name="bloodFlow"
              oninput="value=value.replace(/[^0-9.]/g,'')"
            />
            <span v-if="editIndex != scope.$index">{{
                scope.row.bloodFlow
              }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="置换速度
L/h"
          align="center"
          width="100"
        >
          <template slot-scope="scope">
            <el-input
              v-if="editIndex == scope.$index"
              v-model="scope.row.replacementRate"
              style="text-align: center"
              name="replacementRate"
              oninput="value=value.replace(/[^0-9.]/g,'')"
            />
            <span v-if="editIndex != scope.$index">{{
                scope.row.replacementRate
              }}</span>
          </template>
        </el-table-column>
        <el-table-column label="透析速度L/h" align="center" width="100">
          <template slot-scope="scope">
            <el-input
              v-if="editIndex == scope.$index"
              v-model="scope.row.dialysisSpeed"
              style="text-align: center"
              name="dialysisSpeed"
              oninput="value=value.replace(/[^0-9.]/g,'')"
            />
            <span v-if="editIndex != scope.$index">{{
                scope.row.dialysisSpeed
              }}</span>
          </template>
        </el-table-column>
        <el-table-column label="净超滤量ml" align="center" width="100">
          <template slot-scope="scope">
            <el-input
              v-if="editIndex == scope.$index"
              v-model="scope.row.ultrafiltrationQuantity"
              style="text-align: center"
              name="ultrafiltrationQuantity"
              oninput="value=value.replace(/[^0-9.]/g,'')"
            />
            <span v-if="editIndex != scope.$index">{{
                scope.row.ultrafiltrationQuantity
              }}</span>
          </template>
        </el-table-column>
        <el-table-column label="护士签名" align="center" width="80">
          <template slot-scope="scope">
            <el-select
              v-if="editIndex == scope.$index"
              v-model="scope.row.signature"
              filterable
              :filter-method="signFilter"
            >
              <el-option
                v-for="item in signOptions"
                :key="item.id"
                :value="item.user_name"
                :label="item.user_namee"
              />
            </el-select>
            <span v-if="editIndex != scope.$index">
              {{scope.row.signature}}
            </span>
          </template>
        </el-table-column>
        <el-button
          v-if="actionColumnFlag"
          slot="append"
          style="
              width: 100%;
              border-radius: 0;
              border-top: 0;
              border-left: 0;
              border-right: 0;
            "
          @click="appendNew"
        >点击追加一行
        </el-button
        >
      </el-table>

      <el-dialog
        title="护理模板选择"
        :visible.sync="nursingMeasuresDialog"
        :close-on-click-modal="false"
      >
        <nursingTemplate :rowIndex="rowIndex"/>
      </el-dialog>
    </div>
    <!-- 生命打印内容 ------------------------------------------------------------------>
    <div style="visibility: hidden; display: none">
      <div
        style="font-size: 14px;"
        :id="printParam.title_id"
      >
        <h2 style="line-height: 40px; display: flex; justify-content: center;">
          <img src="@/icons/img/changzhi.png" style="width: 40px; height: 40px;"/>
          {{ this.$store.state.City }}医院 连续性肾脏替代治疗（CRRT）护理记录单
        </h2>
        <div style="display: flex;flex-wrap: wrap;font-size: 14px">
          <div style="margin-right: 15px;">
            科室：
            {{ this.data.department_name === "" ? "" : this.data.department_name }}
          </div>
          <div style="margin-right: 15px;">
            床号：
            {{ this.data.bed_code === "" ? "" : this.data.bed_code }}
          </div>
          <div style="margin-right: 15px;">
            姓名：
            {{ this.data.name === "" ? "" : this.data.name }}
          </div>
          <div style="margin-right: 15px;">
            性别：
            {{ this.data.sex === "" ? "" : this.data.sex }}
          </div>
          <div style="margin-right: 15px;">
            年龄：
            {{ this.$store.state.user.severFall.ageOrMonthAge }}
          </div>
          <div style="margin-right: 15px;">
            住院号：
            {{ this.data.visit_id === "" ? "" : this.data.visit_id }}
          </div>
          <div style="margin-right: 15px;">
            登记号：
            {{ this.data.visit_id === "" ? "" : this.data.visit_id }}
          </div>
          <div style="margin-right: 15px;">
            入科时间：
            {{
              this.data.enter_time === ""
                ? ""
                : this.data.enter_time
            }}
          </div>
          <div style="margin-right: 15px;">
            治疗日期：
            {{ info.cureDate }}
          </div>
          <div style="margin-right: 15px;">
            诊断：
            {{ this.data.diagnosis_name }}
          </div>
        </div>
        <div>
          <div style="font-size: 16px;font-weight: bold;margin: 10px 0 5px">CRRT前评估:</div>
          <div style="display: flex;flex-wrap: wrap;">
            <div style="margin-right: 15px;">
              机器型号：
              {{ info.machineModel }}
            </div>
            <div style="margin-right: 15px;">
              置管部位：
              {{ info.catheteringPart }}
            </div>
            <div style="margin-right: 15px;">
              血液滤过器：
              {{ info.hemofilter }}
            </div>
            <div style="margin-right: 15px;">
              神志：
              {{ info.mind }}
            </div>
            <div style="margin-right: 15px;">
              收缩压：
              {{ info.systolicPressure }}mmHg
            </div>
            <div style="margin-right: 15px;">
              舒张压：
              {{ info.diastolicPressure }}mmHg
            </div>
            <div style="margin-right: 15px;">
              心率：
              {{ info.heartRate }}次/分
            </div>
            <div style="margin-right: 15px;">
              呼吸：
              {{ info.breathe }}次/分
            </div>
            <div style="margin-right: 15px;">
              spo2：
              {{ info.spo2 }}
            </div>
            <div style="margin-right: 15px;">
              透析液速度：
              {{ info.dialyzateVelocity }}L/H
            </div>
            <div style="margin-right: 15px;">
              前置换速度：
              {{ info.beforeReplacementVelocity }}L/H
            </div>
            <div style="margin-right: 15px;">
              后置换速度：
              {{ info.afterReplacementVelocity }}L/H
            </div>
            <div style="margin-right: 15px;">
              置换液补充后：
              {{ info.liquidReplenish }}%
            </div>
          </div>
        </div>

        <div>
          <div style="font-size: 16px;font-weight: bold;margin: 10px 0 5px">小结：</div>
          <div style="display: flex; font-size: 14px; line-height: 30px;">
            <div style="margin-right: 15px;">
              开机时间：
              {{ info.startTime }}
            </div>
            <div style="margin-right: 15px;">
              上机护士：
              {{ info.upNurse }}
            </div>
            <div style="margin-right: 15px;">
              关机时间：
              {{ info.closeTime }}
            </div>
            <div style="margin-right: 15px;">
              下机护士：
              {{ info.downNurse }}
            </div>
          </div>
        </div>

      </div>

      <el-table
        :id="printParam.table_id"
        ref="mainTable"
        :data="dataArray"
        :stripe="true"
        style="width: 100%"
        @row-dblclick="rowDbClick"
        :header-cell-style="{
          background: '#F5F7FA',
          color: '#606266',
        }"
      >
        <el-table-column label="日期" width="180" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.dataTime }}</span>
          </template>
        </el-table-column>
        <el-table-column label="抗凝方式" align="center" width="93">
          <template slot-scope="scope">
            <span>{{ scope.row.antiFreezing }}</span>
          </template>
        </el-table-column>
        <el-table-column label="抗凝剂量" align="center" width="93">
          <template slot-scope="scope">
            <span>{{ scope.row.anticoagulant }}</span>
          </template>
        </el-table-column>
        <el-table-column label="神志" align="center" width="53">
          <template slot-scope="scope">
            <span>{{ scope.row.mind }}</span>
          </template>
        </el-table-column>
        <el-table-column label="血压(mmHg)" align="center" width="100">
          <template slot-scope="scope">
            <span>{{ scope.row.blood }}</span>
          </template>
        </el-table-column>
        <el-table-column label="心率(次/分)" align="center" width="75">
          <template slot-scope="scope">
            <span>{{ scope.row.hr }}</span>
          </template>
        </el-table-column>
        <el-table-column label="呼吸(次/分)" align="center" width="75">
          <template slot-scope="scope">
            <span>{{ scope.row.resp }}</span>
          </template>
        </el-table-column>
        <el-table-column label="SpO₂(%)" align="center" width="50">
          <template slot-scope="scope">
            <span>{{ formatSpO2(scope.row.spo2) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="输入压" align="center" width="90">
          <template slot-scope="scope">
            <span>{{ scope.row.inputVoltage }}</span>
          </template>
        </el-table-column>
        <el-table-column label="跨膜压" align="center" width="90">
          <template slot-scope="scope">
            <span>{{ scope.row.transmembranePressure }}</span>
          </template>
        </el-table-column>
        <el-table-column label="回输压" align="center" width="90">
          <template slot-scope="scope">
            <span>{{ scope.row.backPressure }}</span>
          </template>
        </el-table-column>
        <el-table-column label="护理措施" align="center" width="150">
          <template slot-scope="scope">
            <span>{{ scope.row.content }}</span>
          </template>
        </el-table-column>
        <el-table-column label="超滤率ml/h" align="center" width="100">
          <template slot-scope="scope">
            <span>{{ scope.row.ultrafiltrationRate }}</span>
          </template>
        </el-table-column>
        <el-table-column label="血流量ml/min" align="center" width="100">
          <template slot-scope="scope">
            <span>{{ scope.row.bloodFlow }}</span>
          </template>
        </el-table-column>
        <el-table-column label="置换速度L/h" align="center" width="100">
          <template slot-scope="scope">
            <span>{{ scope.row.replacementRate }}</span>
          </template>
        </el-table-column>
        <el-table-column label="透析速度L/h" align="center" width="100">
          <template slot-scope="scope">
            <span>{{ scope.row.dialysisSpeed }}</span>
          </template>
        </el-table-column>
        <el-table-column label="净超滤量ml" align="center" width="100">
          <template slot-scope="scope">
            <span>{{ scope.row.ultrafiltrationQuantity }}</span>
          </template>
        </el-table-column>
        <el-table-column label="护士签名" align="center" width="80">
          <template slot-scope="scope">
            <span>{{scope.row.signature}}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-drawer title="评估列表" :visible.sync="table" direction="rtl">
      <el-table :data="gridData" style="padding-left: 20px">
        <el-table-column label="序号" type="index" align="center" width="60"/>
        <el-table-column label="治疗日期" property="cureDate" align="center" width="150"/>
        <el-table-column label="操作" width="140" align="center">
          <template slot-scope="scope">
            <el-button
              slot="reference"
              size="mini"
              style="margin-left: 10px"
              type="primary"
              @click="choice(scope)"
            >选择
            </el-button
            >
            <el-popover
              :ref="`popover-${scope.$index}`"
              trigger="click"
              placement="top"
              width="100"
            >
              <p class="el-icon-warning">确定删除</p>
              <div style="text-align: right; margin: 0">
                <el-button size="mini" type="text" @click="no(scope)"
                >取消
                </el-button
                >
                <el-button type="primary" size="mini" @click="yes(scope)"
                >确定
                </el-button
                >
              </div>
              <el-button
                slot="reference"
                size="mini"
                style="margin-left: 10px"
                type="danger"
              >删除
              </el-button
              >
            </el-popover>
          </template>
        </el-table-column>
      </el-table>
    </el-drawer>
  </div>
</template>

<script>
import {jyxdPrint} from "../../utils/jyxd-printer";
import nursingTemplate from "@/views/nursingDocument/nursingTemplate.vue";
import {
  crrtAccessinsert,
  crrtNurseinsertTwo,
  crrtNurseQueryList,
  crrtAccessqueryList,
  crrtNursedelete,
  crrtAccessqueryData,
  crrtAccessdelete,
  findPage,
  crrtNurseAddListData,
  getUserListByUserTypegetNurseList, crrtAccessqueryLastData,
} from "@/api/table";
import {dateUtils} from "@/utils/dateUtils";
import {Message} from "element-ui";
import {isNumber} from "@/utils/utils";

export default {
  components: {
    nursingTemplate
  },
  data() {
    return {
      template: "",
      rowIndex: "",
      table: false,
      garbage: false,
      selectedId: "",
      gridData: [],
      printParam: {
        pageStartNumber: "",//设置页码信息
        table_id: "mytableV", //表实体div id，<el-table>表内容不能全空，至少有一行，即使是空行
        title_id: "myheaderV", //表前抬头栏div 的id，如果没有或不需打印，去除此变量或置空或置"无"
        tail_id: "tailDivId",
        page_rows: 9, //首页行数，0，表示不分页
        second_rows: 8, //首页之外各页的行数，只在首页打印抬头的话首页行数和其它页行数会不同

        paper_height: "1050", //纸张长度，设为大于500的值表示自动按纸张长度分页，设其它值都按每页行数分页。
        //例如A4纸长度大概在1040-1400之间。
        //纸张长度分页优于按行数分页，设置纸张长度后，每页行数的设置被忽略不用。
        //严重折行的表格按纸张长度分页可能会造成分页错误，预览到错误后可以调整纸张长度纠正。
        paper_width: "1560",

        table_head: "", //非el-table表的表头id，表前部不变部分，用<tbody id=>  </tbody>括起来
        table_body: "", //非el-table表的表体id，填充数据部分，用<tbody id=>  </tbody>括起来
        table_foot: "", //非el-table表的表脚id，表里不变部分，用<tbody id=>  </tbody>括起来

        button: "", //是否打印按钮，置"button"或"打印"表示输出按钮，去除此变量或置空将隐藏所有按钮
        title: "first", //是否每页都要页面抬头，置"first"或"首页"表示只有首页打印抬头，去除此变量或置空所有页面都有抬头
        tail: "", //是否每页都要页面签字栏，置"first"或"首页"表示只有首页打印签字栏，去除此变量或置空所有页面都有签字栏

        blank: 0, //打印空表页数，空表保留所有上述格式，内容为空。0表示打印实际数据表。
        hidden_col: "", //隐藏列号范围，如 "0,2-4,9"，列号从0起计，去除此变量或置空表示打印所有列。复杂表头暂不支持列隐藏。

        preview: "预览", //是否仅仅预览？置"预览"表示仅展示在屏幕上，置空表示表示直接调用print()。
        thead_style: "font-size:15px",
        tbody_style: "font-size:15px",
        debug: "no", //不打印debug信息
      },
      lifeData: {},
      data: this.$store.state.user.severFall,
      dataArray: [], //表格数据
      editIndex: -1, //编辑行号，从0开始
      lastRowData: {}, //保存回滚值
      arrUserName: [],
      signOptions: [],
      info: {
        cureDate: "",
        machineModel: "",
        catheteringPart: "",
        hemofilter: "",
        mind: "",
        systolicPressure: "",
        diastolicPressure: "",
        heartRate: "",
        breathe: "",
        spo2: "",
        dialyzateVelocity: "",
        beforeReplacementVelocity: "",
        afterReplacementVelocity: "",
        liquidReplenish: "",
        startTime: "",
        closeTime: "",
        upNurse: "",
        downNurse: "",
      },
      nursingMeasuresDialog: false,
      actionColumnFlag: true,
    };
  },
  created() {
    this.data = this.$store.state.user.severFall;

    if (this.data.unplanned == "" || this.data.unplanned == null) {
      this.garbage = true;
      alert('请在首页补全患者信息')
      return;
    } else {
      this.garbage = false;
    }
    if (this.data.visit_time != undefined && this.data.visit_time != "") {
      this.data.visit_time = this.data.visit_time.slice(0, 10);
    }
    //获取签名列表
    getUserListByUserTypegetNurseList({
      deptCode: this.$store.state.user.loginInfo.deptCode
    }).then((res) => {
      this.arrUserName = res.data;
      Object.assign(this.signOptions, res.data);
      this.$forceUpdate();
    });

    //首次加载页面时，获取最新的crrt数据显示
    crrtAccessqueryLastData({
      patientId: this.data.patient_id,
    }).then((res) => {
      if(res.code == 200 && res.data != undefined){
        this.info = res.data;
        this.selectedId = res.data.id;

        this.queryCrrtList();
      }
    });

    this.findPageByPatientId();

    //护理措施
    eventBus.$on("selectTemplateResult", (row) => {
      this.dataArray[row.rowIndex].content = row.val;
      this.nursingMeasuresDialog = false;
    });

    eventBus.$on("selectTemplateValue", (row) => {
      this.dataArray[row.rowIndex].nursingAssessment = row.val;
    });
  },
  methods: {
    signFilter(val) {
      this.value = val;
      if (val) { //val存在
        this.signOptions = this.arrUserName.filter((item) => {
          if (item.user_name.indexOf(val) >= 0 || item.login_name.indexOf(val) >=0 ) {
            return true;
          }
        })
      } else { //val为空时，还原数组
        Object.assign(this.signOptions, this.arrUserName);
      }
    },
    //设置页码
    findPageByPatientId() {
      findPage({
        patientId: this.data.patient_id,
      }).then((res) => {
        if (res.data != null && res.data.length > 0) {
          this.printParam.pageStartNumber = res.data[0].pageNum;
        } else {
          this.printParam.pageStartNumber = "";
        }
      });
    },
    histion() {
      if (
        typeof this.data.patient_id != "string" ||
        this.data.patient_id.length < 1
      ) {
        alert("请选择一次病人");
      } else {
        this.table = true;
        if (this.data.patient_id) {
          crrtAccessqueryList({
            patientId: this.data.patient_id,
          }).then((res) => {
            this.gridData = res.data;

            this.reload();
          });
        }
      }
    },
    // 选择
    choice(scope) {
      crrtAccessqueryData({
        status: 1,
        patientId: this.data.patient_id,
        id: scope.row.id,
      }).then((res) => {
        this.info = res.data;
        this.selectedId = res.data.id;

        this.queryCrrtList();
      });
    },
    yes(scope) {
      // 可以在这里执行删除数据的回调操作.......删除操作......
      crrtAccessdelete({
        id: scope.row.id,
      }).then((res) => {
        this.$message({message: "删除成功", type: "success"});
        this.histion();
      });
      scope._self.$refs[`popover-${scope.$index}`].doClose();
    },
    no(scope) {
      this.$message("取消删除");
      scope._self.$refs[`popover-${scope.$index}`].doClose();
    },
    saveBtn() {
      if (
        typeof this.data.patient_id != "string" ||
        this.data.patient_id.length < 1
      ) {
        alert("请选择一次病人");
      } else {
        if (!this.info.patientId) {
          this.info.patientId = this.data.patient_id;
        }

        crrtAccessinsert(this.info).then((res) => {
          this.selectedId = res.data.id;
          if (res.code === 200) {
            this.$message({
              message: "保存成功",
              type: "success",
            });
          } else {
            this.$message({
              message: "保存失败",
              type: "success",
            });
          }
        });
      }
    },
    printAllButtonClick() {
      this.editIndex = -1;
      jyxdPrint(this.printParam);
    },

    //添加空数据行
    addEmptyRow() {
      var item = new Object();

      this.editIndex = this.dataArray.length;

      item.id = '';
      item.index = this.dataArray.length;
      item.content = '';
      item.dataTime = dateUtils(2, new Date());
      if (this.lifeData) {
        item.hr = this.lifeData.hr;
        item.resp = this.lifeData.resp;
        item.blood = this.lifeData.nibps == null ? '' : this.lifeData.nibps + "/" + this.lifeData.nibpd;
        item.spo2 = this.lifeData.spo2;

        item.antiFreezing = this.lifeData.antiFreezing;
        item.anticoagulant = this.lifeData.anticoagulant;
        item.ultrafiltrationRate = this.lifeData.ultrafiltrationRate;
        item.bloodFlow = this.lifeData.bloodFlow;
        item.replacementRate = this.lifeData.replacementRate;
        item.dialysisSpeed = this.lifeData.dialysisSpeed;
      }

      if (this.dataArray.length != 0) {
        item.inputVoltage = this.dataArray[item.index - 1].inputVoltage;
        item.transmembranePressure = this.dataArray[item.index - 1].transmembranePressure;
        item.backPressure = this.dataArray[item.index - 1].backPressure;
      }

      this.dataArray.push(item);
    },

    tableRowClassName({row, rowIndex}) {
      //把每一行的索引放进row
      row.index = rowIndex;
    },
    rowDbClick(row, column, ev) {
      console.log(row);
      //判断是否允许双击
      if (this.actionColumnFlag == false) return;
      if (row.signature == "") {
        row.signature = "无";
      }
      if (row.signature_again == "") {
        row.signature_again = "无";
      }
      if (typeof row == "undefined") return;
      if (row.index == this.editIndex) {
        return;
      }

      if (this.editIndex >= 0) {
        alert("前次编辑未结束!");
        return;
      }

      //保存旧数据
      this.lastRowData = JSON.parse(JSON.stringify(this.dataArray[row.index]));
      this.editIndex = row.index;
    },
    dateTimeChange(row) {
      //获取监护仪数据
      crrtNurseAddListData({
        patientId: this.data.patient_id,
        crrtAssessId: this.selectedId,
        time: row.dataTime
      }).then((res) => {
        if (res.code == 200) {
          row.hr = res.data.hr;
          row.resp = res.data.resp;
          row.blood = res.data.nibps == null ? '' : res.data.nibps + "/" + res.data.nibpd;
          row.spo2 = this.lifeData.spo2;

          row.antiFreezing = res.data.antiFreezing;
          row.anticoagulant = res.data.anticoagulant;
          row.ultrafiltrationRate = res.data.ultrafiltrationRate;
          row.bloodFlow = res.data.bloodFlow;
          row.replacementRate = res.data.replacementRate;
          row.dialysisSpeed = res.data.dialysisSpeed;
        } else {
          this.$message({message: res.msg, type: "warning"});
        }
      });
    },
    //双击选择护理措施模板
    selectTemplate(row, index) {
      this.nursingMeasuresDialog = true;
      this.rowIndex = index;
    },
    reload() {
      this.info = {
        cureDate: "",
        machineModel: "",
        catheteringPart: "",
        hemofilter: "",
        mind: "",
        systolicPressure: "",
        diastolicPressure: "",
        heartRate: "",
        breathe: "",
        spo2: "",
        dialyzateVelocity: "",
        beforeReplacementVelocity: "",
        afterReplacementVelocity: "",
        liquidReplenish: "",
        startTime: "",
        closeTime: "",
        upNurse: "",
        downNurse: "",
      };
      this.selectedId = "";
      this.dataArray = [];
    },
    // 点击行编辑
    editButtonClick(index) {
      if (this.editIndex >= 0) {
        alert("前次编辑未结束!");
        return;
      }
      if (index == this.editIndex) return;
      //保存旧数据
      this.lastRowData = JSON.parse(JSON.stringify(this.dataArray[index]));

      this.editIndex = index;
    },
    deleteButtonClick(index, scope) {
      if (this.editIndex >= 0) {
        alert("前次编辑未结束!");
        return;
      }

      if (!confirm("确认删除吗?")) return;

      this.editIndex = -1;

      crrtNursedelete({
        id: scope.row.id,
        status: 1,
        patientId: this.data.patient_id,
      }).then((res) => {
        this.$message({
          message: res.msg,
          type: "success",
        });
        this.queryCrrtList();
      });
    },
    saveButtonClick(row, index) {
      this.insertRow(row, index);
    },
    reverseButtonClick(index) {
      if (!confirm("确认放弃修改, 恢复原值吗?")) return;

      this.$set(this.dataArray, index, this.lastRowData);
      this.editIndex = -1;
    },
    ///////////////////////////上面是编辑逻辑控制-----------------------
    appendNew() {
      if (this.data.patient_id == null) {
        this.$message({message: "请先选择病人", type: "warning",});
        return;
      }

      if (this.editIndex != -1) {
        alert("前次编辑未结束!");
        return;
      }
      if (this.selectedId == "") {
        alert("请先保存CRRT前评估数据");
        return;
      }

      //获取监护仪数据
      crrtNurseAddListData({
        patientId: this.data.patient_id,
        crrtAssessId: this.selectedId,
        time: dateUtils(2, new Date())
      }).then((res) => {
        if (res.code == 200) {
          this.lifeData = res.data;
          this.addEmptyRow();
        } else {
          this.$message({
            message: "生命体征数据请求异常！",
            type: "warning",
          });
        }
      });
    },
    insertRow(insertRow, index) {
      if (index < 0 || typeof this.dataArray != "object" || this.dataArray.length <= index)
        return;

      crrtNurseinsertTwo({
        id: insertRow.row.id,
        visitId: this.data.visit_id,
        visitCode: this.data.visit_code,
        patientId: this.data.patient_id,
        dataTime: insertRow.row.dataTime,
        antiFreezing: insertRow.row.antiFreezing,
        anticoagulant: insertRow.row.anticoagulant,
        mind: insertRow.row.mind,
        blood: insertRow.row.blood,
        hr: insertRow.row.hr,
        resp: insertRow.row.resp,
        spo2: insertRow.row.spo2,
        inputVoltage: insertRow.row.inputVoltage,
        transmembranePressure: insertRow.row.transmembranePressure,
        backPressure: insertRow.row.backPressure,
        content: insertRow.row.content,
        ultrafiltrationRate: insertRow.row.ultrafiltrationRate,
        bloodFlow: insertRow.row.bloodFlow,
        replacementRate: insertRow.row.replacementRate,
        dialysisSpeed: insertRow.row.dialysisSpeed,
        ultrafiltrationQuantity: insertRow.row.ultrafiltrationQuantity,
        signature: insertRow.row.signature,
        status: insertRow.row.status,
        type: insertRow.row.type,
        crrtAssessId: this.selectedId,
      }).then((res) => {
        if (res.code === 200) {
          this.$message({message: res.msg, type: "success"});

          this.queryCrrtList();

          this.editIndex = -1;
        } else {
          this.$message({message: res.msg, type: "error"});
        }
      });
    },

    //根据评估列表选择的id获取表单数据
    queryCrrtList() {
      this.actionColumnFlag = true;
      this.editIndex = -1;

      crrtNurseQueryList({
        crrtAssessId: this.selectedId,
      }).then((res) => {
        if (res.data) {
          this.dataArray = res.data;
        } else {
          this.dataAarray = [];
        }
      })
    },

    //生命体征校验，超出值标红提示
    vitalSignsCheck(value, type) {
      if (value == '' || value == '测不出' || value == null) {
        return '';
      }

      let val = type == 5 ? value : parseInt(value);

      switch (type) {
        case 2: // 2 心率：0-160的整数
          return 0 <= val && val <= 160 ? '' : 'red';
        case 4: // 4 呼吸：0-50的整数
          return 0 <= val && val <= 50 ? '' : 'red';
        case 5: // 5 无创、有创：收缩压/舒张压 ,收缩压大于舒张压,收缩压30-250的整数,舒张压10-200的整数,可以填写测不出
          return this.mmHgCheck(val) == '' ? '' : 'red'; //返回不为空说明异常
        case 9: // 9 spo2小于100的整数
          return 0 <= val && val <= 100 ? '' : 'red';
        default:
          return '';
      }
    },
    //SPO2校验
    SPO2Check(e, scope) {
      //判断是否在0-100之间，或者测不出
      if (e.target.value >= 0 && e.target.value < 101) {
        scope.row.spo2 = e.target.value;
      } else if (e.target.value.trim() == '测不出') {
        scope.row.spo2 = e.target.value.trim();
      } else {
        // scope.row.spo2 = "";
        Message({
          message: "SPO2应该填写0-100的之间的整数,或者测不出",
          type: "warning"
        });
      }
    },
    formatSpO2(val) {
      if (val == "" || val == null) {
        return "";
      } else if (val == '测不出') {
        return val;
      } else {
        return Math.floor(parseFloat(val));
      }
    },
    //心率校验
    xinlvCheck(e, scope) {
      if (e.target.value >= 0 && e.target.value < 161) {
        scope.row.hr = e.target.value;
      } else if (e.target.value.trim() == '测不出') {
        scope.row.hr = e.target.value.trim();
      } else {
        // scope.row.hr = "";
        Message({
          message: "心率应该填写0-160的之间的整数，或者测不出",
          type: "warning"
        });
      }
    },
    //呼吸br校验
    huxiCheck(e, scope) {
      if (e.target.value >= 0 && e.target.value < 51) {
        scope.row.resp = e.target.value;
      } else if (e.target.value.trim() == '测不出') {
        scope.row.resp = e.target.value.trim();
      } else {
        // scope.row.br = "";
        Message({
          message: "呼吸应该填写0-50的之间的整数,或者测不出",
          type: "warning"
        });
      }
    },
    //血压校验
    bloodCheck(e, scope) {
      var val = e.target.value.trim();
      var msg = this.mmHgCheck(val);

      if (msg == '') {
        scope.row.blood = val;
      } else {
        // scope.row.nbp = "";
        Message({
          message: '血压' + msg,
          type: "warning"
        });
      }
    },
    //血压输入值检测,返回错误提示
    mmHgCheck(val) {
      var msg = '';
      if (val == "测不出") {
        return msg;
      }

      var arr = val.split('/');
      var num1 = isNumber(arr[0]) ? Number(arr[0]) : NaN;
      var num2 = isNumber(arr[1]) ? Number(arr[1]) : NaN;

      // 输入数据必须有 '/'、同时为非数字、 或者其中一个为非数字但不为‘’,则进行错误提示
      if (arr.length != 2
        || (isNaN(num1) && isNaN(num2))
        || (isNaN(num1) && arr[0] != '')
        || (isNaN(num1) && arr[1] != '')) {
        msg = "请输入收缩压和舒张压。若只测出一个值，则在相应的位置输入符号/。例如：150/ 或 /150。";
        return msg;
      }
      //第一个为‘’时，判断第二个数字
      if (isNaN(num1) && arr[0] == '') {
        if (num2 < 10 || num2 > 200) {
          msg = '请输入正确的范围，30≤收缩压≤250的整数，10≤舒张压压≤200的整数。';
        }
        return msg;
      }
      //第二个为‘’时，判断第一个数字
      if (isNaN(num2) && arr[1] == '') {
        if (num1 < 30 || num1 > 250) {
          msg = '请输入正确的范围，30≤收缩压≤250的整数，10≤舒张压压≤200的整数。'
        }
        return msg;
      }
      //同时为数字时，需判断num1>num2,且输入范围正确
      if (num1 <= num2) {
        msg = '请检验格式，保证收缩压＞舒张压。';
      } else {
        if (num1 < 30 || num1 > 250 || num2 < 10 || num2 > 200) {
          msg = '请输入正确的范围，30≤收缩压≤250的整数，10≤舒张压压≤200的整数。';
        }
      }
      return msg;
    },
  },
};
</script>
<style lang="scss" scoped>
.summary-block {
  margin-bottom: 15px;

  .el-date-editor.el-input{
    width: 200px;
  }
  ::v-deep .el-input__inner {
    width: 150px;
  }

  ::v-deep .el-select--medium {
    margin-right: 50px;
  }
}

.head-info {
  display: flex;
  flex-wrap: wrap;
  line-height: 40px;
  font-size: 14px;
  border-bottom: 1px solid #808695;

  .content {
    display: inline-block;
    width: 70px;
    height: 30px;
    text-align: center;
    vertical-align: text-bottom;
    border-bottom: 1px solid rgb(220, 222, 226);
    margin-right: 15px;
  }

  ::v-deep .el-date-editor {
    width: 150px;
    margin-right: 15px;
    border: 0px;
    border-bottom: 1px solid rgb(220, 222, 226);
    outline: none;
  }
}

.crrt-info {
  display: flex;
  flex-wrap: wrap;
  font-size: 14px;
  line-height: 20px;

  .item {
    width: 250px;
    margin-right: 20px;
  }
}

.crrt-input {
  border: 0px;
  border-bottom: 1px solid rgb(220, 222, 226);
  outline: none;
  text-align: center;
}

::v-deep .el-drawer.rtl .el-table__row{
  height: 40px;
}
</style>
